<template>
	<customPage :opacity="opacity">
		<view slot="nav">
			<view class="title">我的</view>
		</view>
		<view slot="content" style="height: 200px;">
			<mescroll-body  @scroll="onScroll" class="fill mescroll" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption">
				<view class="my-head">
					<bgColor :height="200" :top="-navBarHeight" />
				</view>
				<view class="" style="height: 1000px;"></view>
			</mescroll-body>
		</view>
		
	</customPage>
</template>

<script>
	import customPage from '@/components/customPage.vue'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import bgColor from '@/components/bgColor.vue'
	export default {
		mixins: [MescrollMixin],
		components:{customPage,bgColor},
		created() {
			this.navBarHeight = getApp().globalData.navBarHeight
		},
		data() {
			return {
				opacity: 1,
				navBarHeight: 0,
				downOption: {
					native: false,
					offset: 50,
					auto: false
				},
				upOption: {
					use: true,
					onScroll: true,
					auto: false
				},
			};
		},
		methods:{
			downCallback(){
				setTimeout(() => {
					this.mescroll.endSuccess(0,false);
				}, 1000)
			},
			upCallback() {
				setTimeout(() => {
					this.mescroll.endSuccess(0,false);
				}, 1000)
			},
			onScroll(mescroll, y, isUp) {
				alert(1)
				console.log('==>',y)
				if(isUp&&this.opacity<1){
					this.opacity = this.opacity + 0.1
				}
				else if(!isUp){
					this.opacity = this.opacity - 0.1
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		text-align: center;
		font-weight: 550;
	}
	.fill{
		width: 100%;
		height: 100%;
	}
	.mescroll {
		height: 200px !important;
		overflow: scroll;
	}
	.my-head{
		width: 100%;
		height: 360rpx;
		position: relative;
		overflow: hidden;
	}
</style>
